<template>
    <div class="code">
          <van-sticky>
            <van-nav-bar
                v-if="$route.query.msg==1"
                @click-left="$router.back()"
                left-arrow
                title="我的二维码"
            ></van-nav-bar>
            <van-nav-bar
                 v-if="$route.query.msg==2"
                @click-left="$router.back()"
                left-arrow
                title="我的二维码"
            ></van-nav-bar>
            <van-nav-bar
                 v-if="$route.query.msg==3"
                @click-left="$router.back()"
                left-arrow
                title="上传营业执照"
            ></van-nav-bar>
         </van-sticky>
        <div class="contentss" v-if="$route.query.msg==1">
             <div class="main">
                <img :src="$route.query.image" alt="">
            </div>
             <label for="upload1">
                <div class="contents-btn">
                    重置二维码
                    <input id="upload1" style="display:none"  type="file" accept="image/*" @change="resetwxCode" class="abc">
                </div>
            </label>
        </div>
        <div class="contentss" v-if="$route.query.msg==2">
             <div class="main">
                  <img :src="$route.query.image" alt="">
            </div>
             <label for="upload2">
                <div class="contents-btn">
                    重置二维码
                    <input id="upload2" style="display:none"  type="file" accept="image/*" @change="resetgzCode" class="abc">
                </div>
            </label>
        </div>
        <div class="contentss" v-if="$route.query.msg==3">
            <div class="main">
                  <img :src="$route.query.image" alt="">
            </div>
            <label for="upload3">
                <div class="contents-btn">
                    重新上传
                    <input id="upload3" style="display:none"  type="file" accept="image/*" @change="resetShangChuan" class="abc">
                </div>
            </label>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            yyzzimg:""
        }
    },
     created(){
        document.querySelector("#app").style.width = "100%";
        document.querySelector("#app").style.height = "100vh";
        document.querySelector("#app").style.backgroundColor = "#f3f5f7";
    },
    methods:{
    resetwxCode(e){
        const file = e.target.files[0] || e.dataTransfer.files[0]
        this.afterReadss(file)
    },
    resetgzCode(e){
        const file = e.target.files[0] || e.dataTransfer.files[0]
        this.afterReads(file)
    },
    resetShangChuan(e){
        const file = e.target.files[0] || e.dataTransfer.files[0]
        this.afterRead(file)
    },
    //上传图片
    afterRead(files) {
     let _this = this;
      //判断是否为图片文件
      if (files.type.indexOf("image") == -1) {
        this.$toast("请上传图片文件");
      } else {
        this.$publicObj.getLoading();
        _this.$publicObj.uploadFile(
          files,
          function (imgData) {
            _this.$toast("上传成功");
             _this.$api.editUserInfo({id:_this.$store.state.userInfo.id,businessLicenseImage:imgData}).then(res=>{
                if(res.code==0){
                    _this.$toast("保存成功")
                    _this.$router.push("/personal")
                }else{
                    _this.$toast(res.msg)
                }
              })
            _this.$publicObj.closeLoading();
          },
          "/sys/oss/upload"
        );
      }
    },
     //上传图片
    afterReads(files) {
     let _this = this;
      //判断是否为图片文件
      if (files.type.indexOf("image") == -1) {
        this.$toast("请上传图片文件");
      } else {
        this.$publicObj.getLoading();
        _this.$publicObj.uploadFile(
          files,
          function (imgData) {
            _this.$toast("上传成功");
             _this.$api.editUserInfo({id:_this.$store.state.userInfo.id,officialChatImage:imgData}).then(res=>{
                if(res.code==0){
                    _this.$toast("保存成功")
                    _this.$router.push("/personal")
                }else{
                    _this.$toast(res.msg)
                }
              })
            _this.$publicObj.closeLoading();
          },
          "/sys/oss/upload"
        );
      }
    },
     //上传图片
    afterReadss(files) {
     let _this = this;
      //判断是否为图片文件
      if (files.type.indexOf("image") == -1) {
        this.$toast("请上传图片文件");
      } else {
        this.$publicObj.getLoading();
        _this.$publicObj.uploadFile(
          files,
          function (imgData) {
            _this.$toast("上传成功");
             _this.$api.editUserInfo({id:_this.$store.state.userInfo.id,weChatImage:imgData}).then(res=>{
                if(res.code==0){
                    _this.$toast("保存成功")
                    _this.$router.push("/personal")
                }else{
                    _this.$toast(res.msg)
                }
              })
            _this.$publicObj.closeLoading();
          },
          "/sys/oss/upload"
        );
      }
    }
    }
}
</script>
<style lang="less" scoped>
.main{
    width: 80%;
    height: 240px;
    opacity: 1;
    background: #ffffff;
    border-radius: 20px;
    margin: 30px;
    margin-top: 150px;
    text-align: center;
    img{
        width: 60%;
        height:180px;
        text-align: center;
        margin-top: 25px;
    } 
}
.contents{
    padding: 10px;
    margin: 10px;
    height: 100px;
    opacity: 1;
    background: #ffffff;
    border-radius: 0.8em;
    box-shadow: 0px 6px 12px 0px #e9e9e9; 
    display: flex;
    line-height: 50px;
    justify-content: space-between;
    .contents-item{
       p{
            width: 112px;
            height: 40px;
            font-size: 14px;
            font-family: PingFang SC, PingFang SC-Regular;
            font-weight: 400;
            text-align: left;
            color: #333333;
       }
       span{
            width: 330px;
            height: 30px;
            font-size: 10px;
            font-family: PingFang SC, PingFang SC-Regular;
            font-weight: 400;
            text-align: left;
            color: #d0d3db;
       }
       .renliansss{
            width: 140px;
            height: 94px;
            position:relative;
            margin-right: 15px;
            background-image: url('../../assets/images/wallet/yyzz.png');
            background-repeat: no-repeat;
            background-size: cover;
            -webkit-background-size: cover;
            background-position: center 0;
            input{
                width: 140px;
                height: 94px;
                display: none;
            }
            img{
                width: 140px;
                height: 94px;
            }
       }
    }
}

.contents-btn{
    width: 80%;
    height: 40px;
    opacity: 1;
    background: #477FE6;
    border-radius: 41px;
    text-align: center;
    line-height: 40px;
    color: #ffffff;
    margin: 140px auto;

}
</style>